<template>
  <!--底部操作栏-->
  <div class="container_bottom">
    <div class="bottom_tab" :class="$route.path == '/home' ? 'tab_active' : ''" @click="changeTab(0)">
      <span class="bottom_tab_span">首页</span>
    </div>
    <div class="bottom_tab" :class="$route.path == '/' ? 'tab_active' : ''" @click="changeTab(1)">
      <span class="bottom_tab_span">个人</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    //改变菜单
    changeTab(index) {
      if (index == 0) {
        this.$router.push({ path: '/home' })
      } else {
        this.$router.push({ path: '/' })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container_bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #000;
  height: 60px;
  display: flex;
}

.bottom_tab {
  width: 50%;
  text-align: center;
  color: #c9c9c9;
  padding: 10px 0;
}

.bottom_tab_span {
  line-height: 30px;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  font-size: 16px;
  display: inline-block;
  /* padding: 0 4px; */
  transition: 0.5s all;
}

.tab_active .bottom_tab_span {
  border-bottom: 2px solid #fda085;
  color: #fda085;
}
</style>
